<template>
  <div class="patient-select-bg">
    <van-nav-bar title="选择就诊人" left-arrow @click-left="goBack">
      <template #right>
        <van-icon name="ellipsis" size="22" />
      </template>
    </van-nav-bar>
    <div class="select-tip">请选择就诊人</div>
    <div
      v-for="item in patients"
      :key="item.id"
      class="patient-card"
      :class="{ selected: selectedId === item.id }"
      @click="selectPatient(item)"
    >
      <div class="patient-info">
        <div class="patient-name">
          {{ item.name }}
          <span class="relation-tag" :class="relationTagClass(item.relation)">
            {{ getRelationName(item.relation) }}
          </span>
        </div>
        <div v-if="item.is_default" class="default-tag">默认就诊人</div>
      </div>
      <div class="patient-phone">{{ maskPhone(item.phone) }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const patients = ref([])
const selectedId = ref(null)
const relationTypes = ref([])

function goBack() {
  router.back()
}

function maskPhone(phone) {
  if (!phone) return ''
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

function relationTagClass(relation) {
  // relation 现在是对象，relation.id === 1 为本人
  return relation && String(relation.id) === '1' ? 'self-tag' : 'parent-tag'
}
function getRelationName(relation) {
  return relation && relation.name ? relation.name : ''
}

function selectPatient(item) {
  selectedId.value = item.id
  router.push({ path: '/booking1', query: { patientId: item.id } })
}

async function fetchPatients() {
  const token = localStorage.getItem('token')
  const headers = { Authorization: token }
  const res = await axios.get('http://127.0.0.1:8000/user/patients/', { headers })
  patients.value = res.data.data || []
  // 默认选中默认就诊人
  const defaultPatient = patients.value.find(p => p.is_default)
  if (defaultPatient) selectedId.value = defaultPatient.id
}

async function fetchRelationTypes() {
  const token = localStorage.getItem('token')
  const headers = { Authorization: token }
  const res = await axios.get('http://127.0.0.1:8000/user/relationtypes/', { headers })
  relationTypes.value = res.data.data || []
}

onMounted(async () => {
  await fetchRelationTypes()
  await fetchPatients()
})
</script>

<style scoped>
.patient-select-bg {
  min-height: 100vh;
  background: #f6f7fb;
}
.select-tip {
  font-size: 16px;
  color: #222;
  margin: 18px 0 12px 18px;
}
.patient-card {
  background: #f8fbff;
  border-radius: 12px;
  margin: 12px 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  cursor: pointer;
}
.patient-card.selected {
  border: 2px solid #338bff;
  background: #f0f6ff;
}
.patient-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.patient-name {
  font-size: 18px;
  font-weight: 500;
  color: #222;
}
.relation-tag {
  margin-left: 8px;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eaf3ff;
  color: #338bff;
}
.self-tag {
  background: #eaf3ff;
  color: #338bff;
}
.parent-tag {
  background: #eaf3ff;
  color: #338bff;
}
.default-tag {
  font-size: 13px;
  color: #338bff;
  background: #eaf3ff;
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: 8px;
}
.patient-phone {
  font-size: 15px;
  color: #888;
  margin-top: 6px;
}
</style>
